/**
 * 协议同意弹窗组件
 * 
 * 功能描述：
 * - 用户登录前的协议同意弹窗
 * - 展示服务协议、隐私政策等法律条款
 * - 提供复选框确认用户已阅读协议
 * - 支持同意登录或暂不登录两种操作
 * 
 * 使用场景：
 * - 用户首次登录时的协议确认
 * - 重要功能使用前的协议同意
 * - 合规性要求的法律条款展示
 * 
 * 作者：系统
 * 创建时间：2024
 */

import { useState } from 'react';
import { X } from 'lucide-react';

interface AgreementModalProps {
  isOpen: boolean;
  onClose: () => void;
  onAgree: () => void;
}

export default function AgreementModal({ isOpen, onClose, onAgree }: AgreementModalProps) {
  const [isChecked, setIsChecked] = useState(false);

  const handleAgree = () => {
    if (isChecked) {
      onAgree();
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl w-full max-w-sm overflow-hidden">
        {/* 标题区域 */}
        <div className="px-6 py-6 text-center relative">
          <button
            onClick={onClose}
            className="absolute top-4 right-4 w-6 h-6 flex items-center justify-center text-gray-400 hover:text-gray-600"
          >
            <X className="w-5 h-5" />
          </button>
          
          {/* 标题和装饰线 */}
          <div className="flex items-center justify-center space-x-4 mb-4">
            <div className="flex-1 h-px bg-gray-200"></div>
            <h2 className="text-xl font-bold text-gray-900 px-4">请先登录</h2>
            <div className="flex-1 h-px bg-gray-200"></div>
          </div>
        </div>

        {/* 按钮区域 */}
        <div className="px-6 pb-4">
          <div className="flex space-x-3">
            {/* 暂不登录按钮 */}
            <button
              onClick={onClose}
              className="flex-1 py-3 px-4 bg-white border border-gray-200 rounded-lg text-gray-900 font-medium hover:bg-gray-50 transition-colors"
            >
              暂不登录
            </button>
            
            {/* 同意协议并登录按钮 */}
            <button
              onClick={handleAgree}
              disabled={!isChecked}
              className={`flex-1 py-3 px-4 rounded-lg font-medium transition-colors ${
                isChecked
                  ? 'bg-primary-600 text-white hover:bg-primary-700'
                  : 'bg-gray-200 text-gray-400 cursor-not-allowed'
              }`}
            >
              同意隐私协议并登录
            </button>
          </div>
        </div>

        {/* 协议复选框 */}
        <div className="px-6 pb-6">
          <label className="flex items-start space-x-3 cursor-pointer">
            <input
              type="checkbox"
              checked={isChecked}
              onChange={(e) => setIsChecked(e.target.checked)}
              className="mt-1 w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500"
            />
            <span className="text-sm text-gray-600 leading-relaxed">
              已阅读并同意
              <span className="text-primary-600 hover:underline cursor-pointer">《妙手医生服务协议》</span>
              <span className="text-primary-600 hover:underline cursor-pointer">《妙手医生隐私政策》</span>
              及
              <span className="text-primary-600 hover:underline cursor-pointer">《妙手医生儿童个人信息保护规则》</span>
            </span>
          </label>
        </div>
      </div>
    </div>
  );
} 